﻿@inherits TextInputBase<List<string>>

<div class=@FieldClass>
@if (!string.IsNullOrEmpty(UseLabel))
{
    <label for=@Id class=@ClassNames(@LabelClasses, LabelClass)>@UseLabel</label>
}
    <div class="mt-1 w-full relative rounded-md shadow-sm">
        @{
            var cls = ClassNames(InputBaseClasses, CssClass(InputValidClasses, InputInvalidClasses));
        }
        <button class=@cls @onclick="handleClick" @onclick:preventDefault>
            <div class="flex flex-wrap pb-1.5">
                @foreach (var tag in Value.OrEmpty())
                {
                    <div class="pt-1.5 pl-1">
                        <span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300">
                            @tag
                            <button type="button" @onclick="_ => RemoveTagAsync(tag)" class="flex-shrink-0 ml-1 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white dark:focus:text-black">
                                <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"><path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7"></path></svg>
                            </button>
                        </span>
                    </div>
                }
                <div class="pt-1.5 pl-1 shrink">
                    <input @ref=@txtInput type=@UseType id=@Id name=@Id @bind-value="InputValue" placeHolder=@placeholder
                           class="p-0 dark:bg-transparent rounded-md border-none focus:!border-none focus:!outline-none"
                           style=@($"box-shadow:none !important;width:{InputValue.Length + 1}ch")
                           @onkeydown="KeyDownAsync" @onkeypress="KeyPressAsync" @bind-value:event="oninput" @onpaste="OnPasteAsync" @onblur="OnBlurAsync"
                           @attributes="IncludeAttributes">
                </div>
            </div>
        </button>
    @if (HasErrorField)
    {
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
        </div>
    }
    </div>
    @if (HasErrorField)
    {
        <p class="@ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
    }
    else if (!string.IsNullOrEmpty(UseHelp))
    {
        <p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
    }
</div>

@code {
    public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500";
    public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300";
    public static string InputBaseClasses { get; set; } = "w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none";
    public static string InputValidClasses { get; set; } = "shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500";
    public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500";
    public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
}